<template>
  <dv-border-box11 title="农业大棚数字化追溯平台" :title-width="400" :animate="false">
    <div class="dashboard">
      <!-- 左边部分 -->
      <div class="left-section">
        <!-- 信息展示 -->
        <div class="info-section">
          <div
              v-for="info in infoData"
              :key="info.title"
              class="info-box-wrapper"
          >
            <div class="border-container">
              <dv-border-box8 :dur="5" class="info-box">
                <InfoBox :title="info.title">
                  <template v-if="info.type === 'chart'">
                    <dv-active-ring-chart :config="info.config" />
                  </template>
                  <template v-else>
                    <p>{{ info.value }}</p>
                  </template>
                </InfoBox>
              </dv-border-box8>
            </div>
          </div>
        </div>

        <!-- 土壤数据和环境数据 -->
        <div class="data-section">
          <div class="data-subbox">
            <div class="border-container">
              <dv-border-box8 :dur="5" class="data-box">
                <DataBox title="土壤数据">
                  <div class="data-grid">
                    <div
                        v-for="(value, key) in soilData"
                        :key="key"
                        class="data-item-wrapper"
                    >
                      <DataItem :title="key" :value="value" :unit="getUnit(key)" />
                    </div>
                  </div>
                </DataBox>
              </dv-border-box8>
            </div>
          </div>

          <div class="data-subbox">
            <div class="border-container">
              <dv-border-box8 :dur="5" class="data-box">
                <DataBox title="环境数据">
                  <div class="data-grid">
                    <div
                        v-for="(value, key) in environmentData"
                        :key="key"
                        class="data-item-wrapper"
                    >
                      <DataItem :title="key" :value="value" :unit="getUnit(key)" />
                    </div>
                  </div>
                </DataBox>
              </dv-border-box8>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边部分 -->
      <div class="right-section">
        <div class="media-section">
          <div class="media-box">
            <div class="border-container">
              <dv-border-box8 :dur="5">
                <MediaBox title="监控照片">
                  <img v-if="photoUrl" :src="photoUrl" alt="监控照片" class="media-image" />
                </MediaBox>
              </dv-border-box8>
            </div>
          </div>
          <div class="media-box">
            <div class="border-container">
              <dv-border-box8 :dur="5">
                <MediaBox title="实时视频">
                  <div id="ys_player" class="video-player"></div>
                </MediaBox>
              </dv-border-box8>
            </div>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box11>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useFetchData } from '@/composables/useFetchData';
import { usePlayer } from '@/composables/usePlayer';
import InfoBox from '@/components/InfoBox.vue';
import DataBox from '@/components/DataBox.vue';
import DataItem from '@/components/DataItem.vue';
import MediaBox from '@/components/MediaBox.vue';
import { BorderBox11 as DvBorderBox11, BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';

// 从 useFetchData 组合式函数中引入数据和方法
const { soilData, environmentData, fetchAllData, photoUrl, fetchPhoto, cameraToken, fetchCameraToken } = useFetchData();
const { initPlayer } = usePlayer();

// 定义 infoData 和 getUnit
const infoData = ref([
  { title: '智慧大棚编号', value: '大棚4号' },
  { title: '占地面积', value: '1.00 亩' },
  { title: '生长阶段', value: '开花结果期' },
  { title: '地点', value: '软件学院实验' },
  { title: '天气', value: '🌤  晴' },
  {
    title: '土壤PH值',
    value: soilData.value['土壤PH值'],
    config: {
      data: [{ name: '土壤PH值', value: soilData.value['土壤PH值']}],
      color: ['#37a2da'],
      radius: '60%',
      activeRadius: '70%',
      digitalFlopStyle: {
        fontSize: 20,
      },
    },
  },

]);

const getUnit = (key: string): string => {
  const units: { [key: string]: string } = {
    '土壤含水率': '%',
    '土壤电导率': 'µS/cm',
    '土壤温度': '℃',
    '土壤氮含量': 'mg/kg',
    '土壤磷含量': 'mg/kg',
    '土壤钾含量': 'mg/kg',
    '土壤PH值': '',
    '空气温度': '℃',
    '空气相对湿度': '%RH',
    '二氧化碳': 'ppm',
    '光照度': 'Lux',
  };
  return units[key] || '';
};

// 生命周期钩子
onMounted(async () => {
  await fetchAllData();
  await fetchPhoto();
  await fetchCameraToken(); // 获取 cameraToken
  if (cameraToken.value) {
    initPlayer(cameraToken.value); // 初始化播放器
  }
});
</script>

<style>
body {
  margin: 0; /* 去除默认外边距 */
  padding: 0; /* 去除默认内边距 */
  background-image: url('../assets/img.png');
  background-size: cover; /* 背景图片等比例铺满页面 */
  background-position: center; /* 居中显示背景图片 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-attachment: fixed; /* 背景固定不随滚动移动 */
  height: 100vh; /* 设置背景高度为视口高度 */
  width: 100vw; /* 设置背景宽度为视口宽度 */
  overflow: hidden; /* 防止滚动溢出 */
  box-sizing: border-box; /* 确保 padding 和 border 算入宽高 */
  color: var(--text-color);
}
.dashboard {
  padding: 52px 20px 20px; /* 增加顶部内边距以防标题被遮挡 */
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 100%; /* 确保高度适应父容器 */
  overflow: hidden; /* 防止内容溢出 */
  box-sizing: border-box; /* 包括 padding 在内 */
  color: var(--text-color); /* 确保字体颜色为白色 */

}

.left-section,
.right-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1; /* 平均分配空间 */
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.info-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  box-sizing: border-box;
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.info-box-wrapper {

}

.data-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.data-subbox {

}

.border-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.data-box {
  display: flex;
  flex-direction: column;
  height: auto; /* 自适应高度 */
  padding: 10px; /* 根据需要调整填充 */
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.data-item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 增加内边距 */
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.media-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1; /* 让媒体部分占据均等空间 */
  max-height: 100%; /* 限制最大高度 */
  box-sizing: border-box;
  overflow: auto; /* 允许滚动 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.media-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1; /* 让媒体盒子占据均等空间 */
  box-sizing: border-box;
  max-height: 400px; /* 限制最大高度 */
  overflow: hidden; /* 防止内容溢出 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  height: auto; /* 自适应高度 */
  min-height: 100px; /* 设置最小高度 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.media-image {
  max-width: 100%;
  max-height: 100%; /* 限制图片最大高度 */
  height: auto; /* 自动调整高度 */
  border-radius: 8px;
  object-fit: cover; /* 保持图片比例 */
  width: 100%; /* 确保图片宽度占满容器 */
  color: var(--text-color); /* 确保字体颜色为白色 */
}

.video-player {
  width: 100%;
  height: 300px; /* 固定视频高度 */
  background-color: #000;
  border-radius: 8px;
  object-fit: cover; /* 保持视频比例 */

}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard {
    flex-direction: column;
  }

  .info-section {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .data-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .video-player {
    height: 250px; /* 在小屏幕上调整视频高度 */
  }

  .media-box {
    max-height: 300px; /* 在小屏幕上调整最大高度 */
  }
}
</style>